<template>
  <div class="home-view">
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <MenuView />
        </el-aside>
        <el-container>
          <el-header>
            <HeaderView />
          </el-header>
          <el-main>
            <el-scrollbar>
             <MainView/>
            </el-scrollbar>
          </el-main>
          <el-footer>
            <el-pagination background layout="prev, pager, next" :total="100" />
          </el-footer>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script  setup>
import MenuView from '../components/MenuView.vue';
import HeaderView from '../components/HeaderView.vue';
import MainView from '../components/MainView.vue';
</script>

<style lang="scss" scoped>
.home-view {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .el-container {
    width: 100vw;
    height: 100vh;
    background-color: rgb(245, 247, 250);
    .el-aside {
      background-color: #545c64;
    }
    .el-footer {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
